﻿@using Pear.Web.Core
@using Microsoft.Extensions.Hosting
@using Furion
@inherits PearRazorPage<object>
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@{ ViewData["Title"] = "服务器信息";}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
@section header
{
    <link rel="stylesheet" href="/admin/css/other/console2.css" />
}
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        资源管理
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                <div class="pear-card2">
                                    <div class="title">CPU 核心数</div>
                                    <div class="count pear-text">@Environment.ProcessorCount</div>
                                </div>
                            </div>
                            <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                <div class="pear-card2">
                                    <div class="title">内存总数</div>
                                    <div class="count pear-text" id="TotalRAM">1 GB</div>
                                </div>
                            </div>
                            <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                <div class="pear-card2">
                                    <div class="title">运行时长</div>
                                    <div class="count pear-text" id="RunTime" style="font-size:20px;">00 天 00 小时 00 分 00 秒</div>
                                </div>
                            </div>
                            <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                <div class="pear-card2">
                                    <div class="title">CPU 使用率</div>
                                    <div class="count pear-text" id="CPURate">1 %</div>
                                </div>
                            </div>
                            <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                <div class="pear-card2">
                                    <div class="title">内存使用率</div>
                                    <div class="count pear-text" id="RAMRate">1 %</div>
                                </div>
                            </div>
                            <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                <div class="pear-card2">
                                    <div class="title">.Net 内存占用</div>
                                    <div class="count pear-text" id="DotNetRAM">@Html.Raw(((Double)System.Diagnostics.Process.GetCurrentProcess().WorkingSet64 / 1048576).ToString("N2") + " MB")</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">系统 信息</div>
            <div class="layui-card-body">
                <ul class="list">
                    <li class="list-item"><span class="title">服务器名称</span><span class="footer">@Environment.MachineName</span></li>
                    <li class="list-item"><span class="title">系统</span><span class="footer">@System.Runtime.InteropServices.RuntimeInformation.OSDescription</span></li>
                    <li class="list-item"><span class="title">系统架构</span><span class="footer">@System.Runtime.InteropServices.RuntimeInformation.OSArchitecture</span></li>
                    <li class="list-item"><span class="title">启动时间</span><span class="footer" id="StartupTime">2019-12-9 14:58</span></li>
                    <li class="list-item"><span class="title">部署环境</span><span class="footer">@(App.WebHostEnvironment.IsDevelopment() ? "开发环境" :(App.WebHostEnvironment.IsProduction() ?"生产环境":"其他环境"))</span></li>
                </ul>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">.Net 信息</div>
            <div class="layui-card-body">
                <ul class="list">
                    <li class="list-item"><span class="title">.NET Core版本</span><span class="footer">@Html.Raw(System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription)</span></li>
                    <li class="list-item"><span class="title">内存占用</span><span class="footer" id="DotNetRAM2">@Html.Raw(((Double)System.Diagnostics.Process.GetCurrentProcess().WorkingSet64 / 1048576).ToString("N2") + " MB")</span></li>
                    <li class="list-item"><span class="title">启动时间</span><span class="footer">@System.Diagnostics.Process.GetCurrentProcess().StartTime.ToString("yyyy-MM-dd HH:mm:ss")</span></li>
                </ul>
            </div>
        </div>
    </div>


    @section footer
{
        <script>
            layui.use([ 'jquery','http'], function () {
                var $ = layui.jquery,
                    http = layui.http;

                var loadInfo = function () {
                    http.get('@Url.Action("GetServer", "Home", new { area = "Admin" })').then((res) => {
                        console.log('res',res);
                        $("#TotalRAM").html(res.data.totalRAM);
                        $("#DotNetRAM").html(res.data.dotNetRAM);
                        $("#DotNetRAM2").html(res.data.dotNetRAM);
                        $("#CPURate").html(res.data.cpuRate);
                        $("#RAMRate").html(res.data.ramRate);
                        $("#StartupTime").html(res.data.startupTime);
                        $("#RunTime").html(res.data.runTime);
                    });
                }
                loadInfo();
                setInterval(loadInfo, 1000 * 5);
            });



            layui.use(['echarts', 'jquery'], function () {
                var $ = layui.jquery,
                    echarts = layui.echarts;

                var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

                $("body").on("click", "[data-url]", function () {
                    parent.layui.tab.addTabOnlyByElem("content", {
                        id: $(this).attr("data-id"),
                        title: $(this).attr("data-title"),
                        url: $(this).attr("data-url"),
                        close: true
                    })
                })


                let bgColor = "#fff";
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69"
                ];
                let echartData = [{
                    name: "1",
                    value1: 50,
                    value2: 45
                },
                {
                    name: "2",
                    value1: 56,
                    value2: 50
                },
                {
                    name: "3",
                    value1: 40,
                    value2: 56
                },
                {
                    name: "4",
                    value1: 50,
                    value2: 55
                },
                {
                    name: "5",
                    value1: 60,
                    value2: 50
                },
                {
                    name: "6",
                    value1: 65,
                    value2: 40
                },
                {
                    name: "7",
                    value1: 66,
                    value2: 50
                },
                {
                    name: "8",
                    value1: 70,
                    value2: 60
                }
                ];

                let xAxisData = echartData.map(v => v.name);
                //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                let yAxisData1 = echartData.map(v => v.value1);
                // [100, 138, 350, 173, 180, 150, 180, 230]
                let yAxisData2 = echartData.map(v => v.value2);
                // [233, 233, 200, 180, 199, 233, 210, 180]
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor =
                            `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                                "0x" + hex.slice(3, 5)
                            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                }

                option = {
                    backgroundColor: bgColor,
                    color: color,
                    legend: {
                        right: 10,
                        top: 10
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: function (params) {
                            let html = '';
                            params.forEach(v => {
                                console.log(v)
                                html +=
                                    `<div style="color: #666;font-size: 14px;line-height: 24px">
                                                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                                                    ${v.seriesName}.${v.name}
                                                    <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                                                    %`;
                            })



                            return html
                        },
                        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                        axisPointer: {
                            type: 'shadow',
                            shadowStyle: {
                                color: '#ffffff',
                                shadowColor: 'rgba(225,225,225,1)',
                                shadowBlur: 5
                            }
                        }
                    },
                    grid: {
                        top: 100,
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: "#333"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#D9D9D9"
                            }
                        },
                        data: xAxisData
                    }],
                    yAxis: [{
                        type: "value",
                        name: 'CPU / RAM 使用率',
                        axisLabel: {
                            textStyle: {
                                color: "#666"
                            }
                        },
                        nameTextStyle: {
                            color: "#666",
                            fontSize: 12,
                            lineHeight: 40
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#E9E9E9"
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }],
                    series: [{
                        name: "CPU",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[0], 0.3)
                                    },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[0], 0.1)
                                    }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData1
                    }, {
                        name: "RAM",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,
                        symbolSize: 8,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[1],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[1], 0.5),
                                shadowOffsetY: 8
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                        offset: 0,
                                        color: hexToRgba(color[1], 0.3)
                                    },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[1], 0.1)
                                    }
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[1], 0.1),
                                shadowBlur: 10
                            }
                        },
                        data: yAxisData2
                    }]
                };

                echartsRecords.setOption(option);

                window.onresize = function () {
                    echartsRecords.resize();
                }

            });
        </script>
    }
